<template>
  <z-publicFrame>
    <template #header>
      <el-page-header @back="goBack" content="添加">
      </el-page-header>
    </template>
    <template #container>
      <div class="formStyle">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item prop="userAccount" label="用户账号">
            <el-input v-model="form.userAccount"></el-input>
          </el-form-item>
          <el-form-item prop="userPw" label="用户密码">
            <el-input type="password" v-model="form.userPw"></el-input>
          </el-form-item>
          <el-form-item prop="detailInfo" label="用户姓名">
            <el-input v-model="form.fullName"></el-input>
          </el-form-item>
          <el-form-item label="是否锁定" prop="available">
            <el-radio-group v-model="form.locked">
              <el-radio :label="0">公开</el-radio>
              <el-radio :label="1">锁定</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="用户角色">
            <el-checkbox-group v-model="form.roles">
              <el-checkbox v-for="(item,index) in roles" :key="index" :label="item.code" name="role">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="详细配置">
            <el-input type="textarea" v-model="form.userConfig"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleUpdate">立即修改</el-button>
          </el-form-item>
        </el-form>

      </div>
    </template>
  </z-publicFrame>
</template>

<script>
import PublicFrame from '../../components/CrudTempalte/PublicFrame'

export default {
  name: 'add',
  components: {
    'z-publicFrame': PublicFrame
  },
  props: ['menus'],
  data() {
    return {
      api: {
        update: this.$api.user.update,
        detail: this.$api.user.detail,
        roles: this.$api.role.list

      },
      rules: {
        name: [
          { required: true, message: '请输入菜单名字', trigger: 'blur' }
        ]
      },
      form: {
        userAccount: null,
        fullName: null,
        locked: null,
        roles: [],
        userConfig: null,
        userPw: null,
        code: null
      },
      roles: []
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    handleUpdate() {
      this.$httpTemplate({ url: this.api.update, json: this.form })
    },
    handleDetail(code) {
      this.$httpTemplate({ url: this.api.detail, paras: { code: code } }, data => {
        for (let item in this.form) {
          let temp = data.data.data.user[item]
          if (temp || temp === 0) {
            this.form[item] = data.data.data.user[item]
          }
        }
      })
    },
    handleRoles() {
      this.$httpTemplate({ url: this.api.roles }, data => {
        this.roles = data.data.data.role
      })
    }
  },
  created() {
    const code = this.$route.query.code
    this.form.code = code
    this.handleRoles()
    this.handleDetail(code)
  }
}
</script>

<style scoped>
  .el-page-header {
    margin: 15px 0;
    overflow: hidden;
  }
  div.formStyle {
    margin-top: 30px;

  }
  .menu-list{
    float: left;
    width: 35%;
  }
  .api-list{
    overflow: auto;
  }
  .permission-block {
    margin: 20px 20px;
    height: 300px;
  }
</style>
